<template>
  <div class="app-container">
    <el-button
      type="primary"
      @click="dialogFormVisible1 = true"
      style="margin-bottom: 10px;">新增</el-button>
    <el-dialog
      title="添加话术"
      :visible.sync="dialogFormVisible1">
      <el-form
        :model="form">
        <el-form-item label="编号">
          <el-input
            v-model="form.num"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="form.keyword"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职级">
          <el-input
            v-model="form.state"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="form.content"
            type="textarea"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建日期">
          <el-input
            v-model="form.createDate"
            autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button
        @click="dialogFormVisible1 = false">取 消</el-button>
      <el-button
        type="primary"
        @click="dialogFormVisible1 = false">确 定</el-button>
    </span>
    </el-dialog>
    <el-button
      type="warnig"
      style="margin-bottom: 10px;">批量删除</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      style="width: 100%;">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="num"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="keyword"
        label="关键字"
        width="180">
      </el-table-column>
      <el-table-column
        prop="state"
        label="职级"
        width="180">
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="创建日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="updateDate"
        label="更新日期"
        width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="编辑话术"
      :visible.sync="dialogFormVisible">
      <el-form
        :model="form1">
        <el-form-item label="编号">
          <el-input
            v-model="form1.num"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="form1.keyword"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职级">
          <el-input
            v-model="form1.state"
            autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="form1.content"
            type="textarea"
            autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button
        @click="dialogFormVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="dialogFormVisible = false">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      tableData: [
        {
          num: '001',
          keyword: '张三',
          state: '12345678901',
          content: '你好，我是张三',
          createDate: '2023-02-21',
          updateDate: '2023-02-23'
        },
        {
          num: '002',
          keyword: '李四',
          state: '12345678901',
          content: '你好，我是李四',
          createDate: '2023-02-18',
          updateDate: '2023-02-23'
        },
        {
          num: '003',
          keyword: '王五',
          state: '12345678901',
          content: '你好，我是王五',
          createDate: '2023-02-17',
          updateDate: '2023-02-25'
        },
        {
          num: '004',
          keyword: '赵六',
          state: '12345678901',
          content: '你好，我是赵六',
          createDate: '2023-02-26',
          updateDate: '2023-02-28'
        }
      ],
      dialogFormVisible1: false,
      dialogFormVisible: false,
      index: -1,
      form: {
        num: '',
        keyword: '',
        state: '',
        content: '',
        createDate: ''
      },
      form1: {
        num: '',
        keyword: '',
        state: '',
        content: '',
        createDate: ''
      }
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
      this.dialogFormVisible = true
      this.form1.num = row.num
      this.form1.keyword = row.keyword
      this.form1.state = row.state
      this.form1.content = row.content
      this.form1.createDate = row.createDate
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    handleSelectionChange() {

    }
  }
}
</script>
<style scoped>
</style>
